<template>
   <!-- 弹窗组件 -->
   <div class="dialog-box">
      <el-dialog
         v-model="dialogVisible"
         title="其他付款"
         width="900"
      >
         <el-form
            :model="form"
            label-width="100px"
         >
            <el-row :gutter="20">
               <el-col :span="12">
                  <el-form-item
                     label="付款金额"
                     required
                  >
                     <el-input
                        v-model="form.name"
                        placeholder="请输入"
                     />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item
                     label="付款方式"
                     required
                  >
                     <el-select
                        v-model="form.fsdf"
                        placeholder="请选择"
                     >
                        <el-option
                           v-for="item in 5"
                           :key="item"
                           :label="item"
                           :value="item"
                        />
                     </el-select>
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="20">
               <el-col :span="12">
                  <el-form-item
                     label="付款日期"
                     required
                  >
                     <el-date-picker
                        type="date"
                        placeholder="请选择"
                     />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item
                     label="备注"
                     required
                  >
                     <el-input
                        v-model="form.contact"
                        placeholder="请输入"
                     />
                  </el-form-item>
               </el-col>
            </el-row>
            <p>附件</p>
            <el-row :gutter="20">
               <el-col :span="12">
                  <div style="margin-top: 10px">
                     <el-button>
                        <el-icon><Upload /></el-icon>
                        上传文件
                     </el-button>
                     <div style="height: 5px"></div>
                     <text class="Paratext">支持扩展名：.rar .zip.doc.docx .pdf .jpg.…<br>单个文件大小在500kb以内</text>
                  </div>
               </el-col>
               <el-col :span="12"> </el-col>
            </el-row>

            <div class="supply-products"></div>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="dialogVisible = false">取消</el-button>
               <el-button
                  color="#626aef"
                  @click="dialogVisible = false"
               >
                  确定
               </el-button>
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup lang="ts">
   import { ref, reactive } from "vue";
   const dialogVisible = ref<boolean>(false); // 弹窗控制器
   const form = reactive<any>({
      name: "",
      level: "",
      contact: "",
      phone: "",
      email: "",
      position: "",
      region: "",
      address: "",
      remark: "",
      fsdf: "",
   });

   const openLoading = () => {
      dialogVisible.value = true;
   };
   const handleSubmit = () => {
      // TODO: 处理表单提交
      dialogVisible.value = false;
   };

   interface Supplier {
      Sname: string;
      name: string;
      Sphone: string;
      Sposition: string;
      id: number;
   }

   // 处理选择供应商
   const handleSelectSupplier = (supplier: Supplier) => {
      form.name = supplier.Sname;
      // console.log("当前选中:", supplier);
   };
   interface PurchasingDirector {
      Sname: string;
      name: string;
      Sphone: string;
      Sposition: string;
      id: number;
   }
   defineExpose({
      openLoading,
   });
</script>

<style lang="scss" scoped>
   ::v-deep .el-dialog {
      --el-dialog-padding-primary: 0px;
   }
   ::v-deep .el-dialog__header {
      padding: 10px 16px;
      border-bottom: 1px solid #f0f0f0;
      font-weight: bold;
   }
   ::v-deep .dialog-footer {
      padding: 10px 16px;
      border-top: 1px solid #f0f0f0;
   }
   ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #000;
   }
   ::v-deep .el-dialog__body {
      padding: 10px 10px;
   }
   :deep(.el-form-item__label) {
      justify-content: flex-start;
   }
   :deep(.el-form-item) {
      flex-direction: column;
      margin-bottom: 7px;
   }
   :deep(.el-select__wrapper) {
      background: #fafcfb;
   }
   :deep(.el-badge__content.is-fixed) {
      color: #666;
      border-radius: 3px;
      padding: 4px;
   }
   :deep(.el-table .cell) {
      display: flex;
      justify-content: center;
   }
   :deep(.el-button:hover) {
      color: #6860ff;
      background: #f4f5f7;
   }
   :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
      width: 100%;
   }
   :deep(.el-input__wrapper:hover) {
      box-shadow: inset 0 0 0 1px #6860ff;
   }
   .supply-products {
      margin-top: 20px;
      .title {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 10px;
         font-weight: bold;
         .title-text {
            display: flex;
            align-items: center;
            .line {
               height: 17px;
               width: 2px;
               border-radius: 12px;
               margin-right: 8px;
               background-color: #6860ff;
            }
         }
      }
   }
   .image-list {
      display: flex;
      gap: 8px;
      .el-image {
         width: 40px;
         height: 40px;
         border-radius: 4px;
      }
   }
   .Paratext {
      color: #D0D0D0;
      size: 2px;
   }
</style>
